<template>
  <a-card title="发布投诉与建议">
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
    >
      <a-descriptions bordered>
      <a-descriptions-item :span="3" label="反馈类型">
        <a-form-model-item prop="type">
          <a-radio-group v-model="form.type">
            <a-radio v-for="(item,index) in typeOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-descriptions-item>
      <a-descriptions-item :span="3" label="描述">
        <a-form-model-item prop="describe">
          <a-textarea v-model="form.describe" :rows="8"></a-textarea>
        </a-form-model-item>
      </a-descriptions-item>
      <a-descriptions-item :span="3" label="上传凭证">
        <a-form-model-item porp="file">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="uploadUrl"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img width="150" height="150" v-if="form.file" :src="form.file" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
            </div>
          </a-upload>
        </a-form-model-item>
      </a-descriptions-item>
    </a-descriptions>
    </a-form-model>
    <p></p>
    <div style="text-align: right">
      <a-button :loading="btnLoading" size="large" type="danger" @click="onSubmit">提交信息</a-button>
    </div>
  </a-card>
</template>

<script>
import { getAddComp, postAddComp } from '@/api/complaint'
import apis from '@/api'

export default {
  name: 'AddComplaint',
  data () {
    return {
      loading: false,
      imageUrl: '',
      typeOpts: {},
      form: {},
      rules: {
        type: [{ required: true, message: '选择反馈类型', trigger: 'change' }],
        describe: [{ required: true, message: '选择反馈类型', trigger: 'change' }],
        file: [{ required: true, message: '选择反馈类型', trigger: 'change' }]
      },
      uploadUrl: apis.Upload,
      btnLoading: false
    }
  },
  created () {
    getAddComp().then(res => {
      this.typeOpts = res.result.typeOpts
    })
  },
  methods: {
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        console.log(info.file)
        this.form.file = info.file.response.data
        this.loading = false
      }
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('必须上传图片文件')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片不允许超过2MB')
      }
      return isJpgOrPng && isLt2M
    },
    onSubmit () {
      const app = this
      app.btnLoading = true
      app.$refs.form.validate(valid => {
        if (valid) {
          postAddComp(app.form).then(res => {
            app.form = {}
            app.btnLoading = false
            app.$router.push({ name: 'ComplaintList' })
          })
        } else {
          app.btnLoading = false
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
